/* eslint-disable array-callback-return */
import React from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { Button, Skeleton } from 'fule-ui';
import { NightData } from './data';
import './index.scss';

export default function Home() {
  const [data, setData] = useState(NightData);
  console.log(setData);
  // 模拟骨架屏加载
  const skeletonData = [
    [
      {
        type: 'rect',
        margin: '0 0 0px 0',
        width: '100%',
        height: '16px',
      },
    ],
    [
      {
        type: 'rect',
        margin: '0 0 20px 0',
        width: '60%',
        height: '16px',
      },
    ],
    [
      {
        type: 'circle',
        size: '80px',
      },
      {
        type: 'paragraph',
        width: '100%',
        items: [
          {
            type: 'rect',
            width: '100%',
            height: '16px',
          },
          {
            type: 'rect',
            width: '100%',
            height: '16px',
          },
          {
            type: 'rect',
            width: '100%',
            height: '16px',
          },
        ],
      },
    ],
  ];
  const [sloading, setSloading] = useState(true);
  // 获取随机一条数据
  let member = data.map((item) => {
    return item.id;
  });
  const [searchId, setSearchId] = useState('0');
  // Hook 防抖
  function useDebounce(fn, delay, dep = []) {
    const { current } = useRef({ fn, timer: null });
    useEffect(() => {
      current.fn = fn;
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [fn]);

    return useCallback((...args) => {
      if (current.timer) {
        clearTimeout(current.timer);
      }
      current.timer = setTimeout(() => {
        current.fn(...args);
      }, delay);
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, dep);
  }
  // 获取新的数据
  const funNewID = useDebounce(() => {
    setSloading(true);
    const newId = member[Math.floor(Math.random() * member.length)];
    console.log(Math.floor(Math.random() * member.length));
    setSearchId(newId);
    setTimeout(() => {
      setSloading(false);
    }, 1000);
  }, 500);
  useEffect(() => {
    funNewID();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="fule-feast">
      <div className="fule-feast__header">
        <div className="fule-feast__header-title">
          <i className="food"></i>
          干饭人
        </div>
        <div className="fule-feast__header-bg"></div>
      </div>
      <div className="fule-feast__body">
        <div className="fule-feast__search">
          <div className="fule-feast__search-tag"></div>
          <div className="fule-feast__search-list">
            <Skeleton rowCol={skeletonData} loading={sloading}>
              {data.map((item, index) => {
                if (item.id === searchId) {
                  return (
                    <div className="fule-feast__media" key={index}>
                      <div className="fule-feast__media-info">
                        <div className="fule-feast__media-info__title">
                          菜名：{item.title}
                        </div>
                        <div className="fule-feast__media-info__desc">
                          简介：{item.desc}
                        </div>
                      </div>
                      <div className="fule-feast__media-img">
                        {item.img.map((subItem, subIndex) => (
                          <img src={subItem} alt="" key={subIndex} />
                        ))}
                      </div>
                    </div>
                  );
                }
              })}
            </Skeleton>
          </div>
        </div>
      </div>
      <div className="fule-feast__footer">
        <Button onClick={funNewID}>随机点餐</Button>
      </div>
    </div>
  );
}
